<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送Ajax get 请求</title>
</head>
<body>
<script type="text/javascript">
  window.onload=function (){
    var elementById = document.getElementById("btn");

    elementById.onclick=function (){
        //创建Ajax核心对象
        var xhr = new XMLHttpRequest();
        //注册回调函数
        xhr.onreadystatechange=function (){
           if ( this.readyState==4){
               if (this.status==200){
                   //通过 XMLHttpRequest 对象的 responseText 属性可以获取到服务器响应回来的内容
                   //并且不管服务器响应回来的是什么，都以普通文本的形式获取，服务器可能响应回来：普通文本、XML、JSON、HTML....;
                   //innerHTML 属性是js 中的语法，和 Ajax的XMLHttpRequest 对象无关
                   //innerHTML 可以设置元素内部的HTML 代码，innerHTML 可以将后面的内容当做一段HTML 代码解释并执行

                  // alert("请求成功")
                   document.getElementById("myspan").innerHTML=this.responseText;
               }else{
                   alert(this.status)
               }
           }
        }
        //开启通道
        //获取用户填写的 username 和 usercode
        var username = document.getElementById("username").value;
        var usercode = document.getElementById("usercode").value;
        xhr.open("GET","/ajax/ajaxrequest2?username="+username+"&usercode="+usercode,true)
        //发送请求
        xhr.send()
        //

    }
  }


</script>

username<input type="text" id="username"><br>
usercode<input type="text"id="usercode"><br>
<button id ="btn">get 请求</button><br>
<span id="myspan"></span>
</body>
</html>